<template>
  <view>
    <bui-page-layout ref="pageLayout" :is-z-paging="false">
      <view class="member-benefit">
        <u-parse :content="partnerBenefitsContent"></u-parse>
      </view>
      <template v-slot:footer>
        <view class="button-footer">
          <view class="btn" @click="onOfficialAccounts">
            <text class="t">关注公众号</text>
          </view>
          <view class="submit" @click="onShare">
            <text class="t">分享文章</text>
          </view>
        </view>
        <view :style="'height: '+safeAreaBottom+'px;'"></view>
      </template>
      <!-- <template v-slot:popup>
      <view class="official-accounts">
        <view class="title">关注公众号</view>
        <view class="info">关注“策多多孵化器”公众号，查看更多海量优质文章，独家秘笈！</view>
        <view class="code">
          <image class="icon" src="" />
        </view>
        <view class="btn" @click="onCopy('关注公众号')">
          <text class="t">复制公众号</text>
        </view>
      </view>
    </template> -->
      <view class="we-share" v-if="isShare" @click="onShareCancel"></view>
      <template v-slot:popup>
        <view class="bind-mobile-title">绑定手机号</view>
        <b-bind-mobile @success="onSuccess"></b-bind-mobile>
        <view style="height: 40rpx;"></view>
      </template>
    </bui-page-layout>
  </view>
</template>
<script setup>
// import clipboard3 from "vue-clipboard3";
import { getCurrentInstance, ref, computed, watch } from "vue";
import { onLoad, onUnload, onReady } from "@dcloudio/uni-app";
import WeChatShareService from "@/lib/WeChatShareService.js";
import { globalStore } from "@/store";
const gStore = globalStore();
gStore.isBindMobile = false;
var Instance = getCurrentInstance();
let partnerBenefitsContent = ref(null);
let partnerBenefitsTitle = ref("");
const pageLayout = ref(null);
var isShare = ref(false);
var safeAreaBottom = ref(0);
const WeChatShare = ref(null);
WeChatShare.value = WeChatShareService.getInstance(Instance);
safeAreaBottom = computed(() => {
  return uni.$u.sys().safeAreaInsets.bottom;
});
onLoad((options) => {});
const onShare = () => {
  if (gStore.isBindMobile) {
    pageLayout.value.openPopup({
      closeOnClickOverlay: false,
    });
  } else {
    isShare.value = true;
  }
};
onUnload(() => {
  gStore.isBindMobile = false;
});

const onSuccess = (_res) => {
  gStore.token = _res;
  uni.$u.toast("绑定成功");
  pageLayout.value.closePopup();
  WeChatShare.value.init();
};
const onOfficialAccounts = () => {
  window.location.href =
    "https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkwMTYwOTM0Nw==#wechat_redirect";
};
const getArticle = () => {
  uni.$request
    .service({
      url: "/cnt/promotion",
      method: "POST",
      data: {},
      isToast: true,
    })
    .then((res) => {
      partnerBenefitsContent.value = res.content;
      partnerBenefitsTitle.value = res.title;
    });
};
getArticle();
onReady(() => {
  setTimeout(() => {
    console.log(partnerBenefitsTitle.value);
    uni.setNavigationBarTitle({
      title: partnerBenefitsTitle.value,
    });
  }, 100);
});
const onShareCancel = () => {
  isShare.value = false;
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f8;
}
.bind-mobile-title {
  padding: 25rpx 0;
  text-align: center;
}
.official-accounts {
  width: 600rpx;
  .title {
    text-align: center;
    font-size: 36rpx;
    font-style: normal;
    font-weight: 600;
    line-height: 42rpx;
    padding: 30rpx 0;
  }
  .info {
    color: #6c7f96;
    font-size: 28rpx;
    margin: 0 40rpx;
    text-align: center;
  }
  .code {
    display: flex;
    justify-content: center;
    padding: 60rpx 0 80rpx;
    .icon {
      width: 320rpx;
      height: 320rpx;
      background-color: #eee;
    }
  }
  .btn {
    background-color: #fe9900;
    display: flex;
    justify-content: center;
    border-radius: 16rpx;
    padding: 22rpx 0;
    margin: 0 30rpx 30rpx;
    font-style: normal;
    font-weight: 500;
    color: #fff;
    box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.15);
  }
}
.member-benefit {
  padding: 10rpx 30rpx 0;
  line-height: 70rpx;
  ._img {
    vertical-align: top;
  }
}
.we-share {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: url("/static/image/icon-share.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.button-footer {
  display: flex;
  margin: 30rpx 40rpx;
  .btn {
    border-radius: 16rpx;
    border: 1px solid #fe9900;
    background: #fff;
    padding: 22rpx 34rpx;
    font-size: 32rpx;
    font-style: normal;
    font-weight: 500;
    color: #fe9900;
    line-height: normal;
    margin-right: 20rpx;
    box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.15);
  }
  .submit {
    flex: 1;
    background-color: #fe9900;
    display: flex;
    justify-content: center;
    border-radius: 16rpx;
    padding: 22rpx 0;
    font-style: normal;
    font-weight: 500;
    box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.15);
    .t {
      font-size: 32rpx;
      color: #fff;
    }
  }
}
</style>
